<template>
  <view v-if="detail">
    <view class="special-work-list__group">
      <view class="special-work-list__item">
        <text class="special-work-list__label">MAC：</text>
        <text class="special-work-list__value">{{ detail.code || '--' }}</text>
        <text class="admin-name">{{ ['人员', '车辆'][detail.type - 1] }}</text>
      </view>
      <view class="special-work-list__item">
        <text class="special-work-list__label">IC/ID：</text>
        <text class="special-work-list__value">{{ detail.icId || '--' }}</text>
      </view>
      <view v-if="detail.type === 1">
        <view class="special-work-list__item">
          <text class="special-work-list__label">部门：</text>
          <text class="special-work-list__value">{{ detail.bindUserDeptName || '--' }}</text>
        </view>
        <view class="special-work-list__item">
          <text class="special-work-list__label">姓名：</text>
          <text class="special-work-list__value">{{ detail.bindUserName || '--' }}</text>
        </view>
      </view>
      <view v-else>
        <view class="special-work-list__item">
          <text class="special-work-list__label">车辆类型：</text>
          <text class="special-work-list__value">{{ detail.bindVehicleType || '--' }}</text>
        </view>
        <view class="special-work-list__item">
          <text class="special-work-list__label">车牌号：</text>
          <text class="special-work-list__value">{{ detail.bindPlateNumber || '--' }}</text>
        </view>
        <view class="special-work-list__item">
          <text class="special-work-list__label">运输介质：</text>
          <text class="special-work-list__value">{{ detail.chemicalName || '--' }}</text>
        </view>
      </view>
      <view class="special-work-list__item">
        <text class="special-work-list__label">电量：</text>
        <text class="special-work-list__value">{{ detail.voltageLabel || '--' }}</text>
      </view>
    </view>
    <view class="submit-group" v-if="isShow && detail.type === 2">
      <button v-if="detail.bindStatus === '2'" class="u-button" type="primary" :ripple="true" @click="cardOperate(1)">
        绑卡
      </button>
      <button v-else-if="detail.bindStatus === '1'" class="u-button" type="primary" @click="cardOperate(2)">
        解绑
      </button>
    </view>
  </view>
  <view v-else>
    <Empty />
  </view>
</template>

<script>
import { positionInfo, isAuthBind } from '@/api/equipment/device-manage.js'
import Empty from '@/components/cu-empty/index.vue'
import { unBindCard } from '../../../api/equipment/device-manage'

export default {
  components: {
    Empty
  },
  computed: {
    suffix() {
      return this.indexList.includes(this.index) ? 'up' : 'down'
    }
  },
  data() {
    return {
      code: '',
      // 基础信息
      detail: {},
      indexList: [0],
      isShow: false
    }
  },

  onLoad(options) {
    this.code = options.code
    this.getBasicInfo()
    this.buttonShow()
  },
  created() {},
  methods: {
    async getBasicInfo() {
      // 1918FF06F7D4
      // const res = await positionInfo(this.code);
      // const res = await positionInfo('1918FF06F7D4');
      // this.code = '1918E004AC91'
      const res = await positionInfo(this.code)
      console.log(res.data)
      this.detail = res.data
    },
    buttonShow() {
      isAuthBind().then((res) => {
        this.isShow = res.data
      })
    },
    cardOperate(type) {
      if (type === 2) {
        let tip = `解绑后, 该人员或车辆的位置信息将无法检测; 请确定该人员或车辆离开后再解绑。`
        this.$modal.confirm(tip).then(() => {
          this.unbind()
        })
      } else {
        uni.navigateTo({
          url: `/pages/work/position-label/bind?code=${this.code}`,
          events: {}
        })
      }
    },
    unbind() {
      unBindCard(this.code).then((res) => {
        this.$modal.showToast(`解绑成功`)
      })
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.special-work__header {
  height: 160rpx;
  background: #a14430;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

.special-work__title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.special-work__code {
  font-size: 28rpx;
}

.special-work__tabs {
  color: #999999;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .special-work__tab-item {
    margin-right: 55rpx;
    height: 60rpx;
    line-height: 40rpx;
    font-size: 30rpx;
    position: relative;

    &.active {
      color: #454a5e;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 6px;
        background: #454a5e;
      }
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

.special-work-list__group {
  padding-left: 30rpx;
  margin-bottom: 20rpx;
  background: #fff;

  .special-work-list__item {
    padding: 24rpx 20rpx 24rpx 0;
    border-bottom: 1rpx solid #d5d7e3;
    display: flex;
    line-height: 40rpx;

    .special-work-list__label {
      color: #333;
      flex-shrink: 0;
    }

    .special-work-list__value {
      color: #666;
    }

    &.flex-col {
      flex-direction: column;

      .special-work-list__label {
        margin-bottom: 20rpx;
      }
    }
  }
}

.special-work__img {
  width: 200rpx;
  height: 100rpx;
  display: inline-block;
  margin-right: 24rpx;
}

.flex-table {
  border-top: 1rpx #ebeef5 solid;
  border-left: 1rpx #ebeef5 solid;
  background-color: #fff;
  text-align: left;

  .flex-auto {
    position: relative;
    flex: 1;
    align-self: stretch;
  }

  .flex-table__tr {
    border-bottom: 1rpx #ebeef5 solid;
    display: flex;
    flex-direction: row;

    .flex-table__td,
    .flex-table__th {
      padding: 20rpx 12rpx;
      flex-shrink: 0;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        z-index: 2;
        top: 0px;
        bottom: 0px;
        right: 0;
        width: 1rpx;
        background: #ebeef5;
      }
    }
  }

  .text-center {
    text-align: center;
  }

  .align-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.submit-group {
  background: #fff;
  z-index: 9;
  padding: 20px;
}

.admin-name {
  display: inline-block;
  margin-left: 10rpx;
  background-color: #88b4c4;
  font-size: 24rpx;
  color: #fff;
  border-radius: 50rpx;
  border-bottom-left-radius: 0;
  padding: 2rpx 10rpx;
  font-weight: 400;
}
</style>
